<template>
  <div class="teacherHome">
    <div class="teacherHome-top">
      <div class="teacherHome-top-title">作业近期情况</div>
      <div class="teacherHome-top-main">
        <Echart id="chart" :option="option" :height="'300px'" :width="'800px'" />
        <div class="teacherHome-top-main-table">
          <div class="title">
            <el-select
              v-model="classNameTop"
              class="m-2"
              placeholder="Select"
              size="small"
              @change="topClassChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-table :data="tableDataTop" border style="width: 100%">
            <el-table-column
              prop="homeworkName"
              label="作业名称"
              width="100"
              align="center"
            />
            <el-table-column
              prop="completedStudent"
              label="完成人数"
              width="150"
              align="center"
            />
            <el-table-column
              prop="unfinishedStudent"
              label="未完成人数"
              width="150"
              align="center"
            />
            <el-table-column prop="sum" label="总数" width="130" align="center" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="teacherHome-main">
      <Echart id="pieChart" :option="optionPie" :height="'430px'" :width="'600px'" />
      <div class="teacherHome-main-table">
        <div class="teacherHome-main-table-title">
          <div>作业成绩</div>
          <div>
            <el-select
              v-model="classNameMain"
              class="m-2"
              placeholder="Select"
              size="small"
              @change="mainClassChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <el-table :data="tableDataMain" border style="width: 100%">
          <el-table-column prop="homeworkName" label="作业名称" width="140" />
          <el-table-column prop="90" label="90分以上" width="100" />
          <el-table-column prop="80" label="80-90之间" width="100" />
          <el-table-column prop="70" label="70-80之间" width="100" />
          <el-table-column prop="60" label="60-70之间" width="100" />
          <el-table-column prop="0" label="不及格" width="100" />
          <el-table-column prop="unfinishedStudent" label="未完成作业" width="100" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, nextTick} from "vue"
import Echart from "../../components/echart/Echart.vue"
import {Home} from "../../api"
import {HomeworkType, ClassType} from "../../interface"
import {init} from "echarts"
type tableDataType = {
  homeworkName: string
  completedStudent: number
  unfinishedStudent: number
  sum: number
}
const classNameTop = ref()
const classNameMain = ref()
let tableDataTop = ref()
let tableDataMain = ref()
const options = ref()
let option: echarts.EChartsOption | undefined | any = ref()
let optionPie: echarts.EChartsOption | any = ref()
const topClassChange = async (val: number) => {
  const res = await Home.getHomeworkByTeacherId({teacherId: 1, classId: val})
  topUpData(res.data)
}
const mainClassChange = async (val: number) => {
  const res = await Home.getHomeworkByTeacherId({teacherId: 1, classId: val})
  const max = res.data.studentArr ? res.data.studentArr.length : 0
  const num = max > 4 ? res.data.studentArr[max - 5] : res.data.studentArr[0]
  mainUpData(res.data, num.id)
}
const tableOnclick = async (a: any) => {
  const res = await Home.getHomeworkByTeacherId({
    teacherId: 1,
    classId: classNameMain.value
  })
  mainUpData(res.data, a.id)
}
const topUpData = (res: {studentArr: HomeworkType[]}) => {
  tableDataTop.value = res.studentArr
    .map((item: HomeworkType) => {
      return {
        homeworkName: item.name,
        completedStudent: item.Jobs!.filter((items) => items.state === 1).length,
        unfinishedStudent: item.Jobs!.filter((items) => items.state === 0).length,
        sum: item.Jobs!.length
      }
    })
    .filter((_, index) => index < 5)
  option.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: tableDataTop.value.map((item: tableDataType) => item.homeworkName)
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "已完成人数",
        stack: "Ad",
        emphasis: {
          focus: "series"
        },
        data: tableDataTop.value.map((item: tableDataType) => item.completedStudent),
        type: "bar"
      },
      {
        name: "未完成人数",
        stack: "Ad",
        emphasis: {
          focus: "series"
        },
        data: tableDataTop.value.map((item: tableDataType) => item.unfinishedStudent),
        type: "bar"
      }
    ]
  }
}
const mainUpData = (res: {studentArr: HomeworkType[]}, index: number) => {
  console.log(res)
  tableDataMain.value = res.studentArr.map((item: HomeworkType) => {
    return {
      id: item.id,
      homeworkName: item.name,
      [90]: item.Jobs!.filter((items) => items.achievement! > 90).length,
      [80]: item.Jobs!.filter(
        (items) => items.achievement! < 90 && items.achievement! > 80
      ).length,
      [70]: item.Jobs!.filter(
        (items) => items.achievement! < 80 && items.achievement! > 70
      ).length,
      [60]: item.Jobs!.filter(
        (items) => items.achievement! < 70 && items.achievement! > 60
      ).length,
      [0]: item.Jobs!.filter((items) => items.achievement! < 60).length,
      unfinishedStudent: item.Jobs!.filter((items) => items.state === 0).length
    }
  })
  tableDataMain.value = tableDataMain.value.filter(
    (_: any, index: number) => tableDataMain.value.length - index <= 5
  )
  const tableIndexItem = tableDataMain.value.filter(
    (item: HomeworkType) => item.id == index
  )[0]
  console.log(tableDataMain.value, "table", index)
  // console.log(tableIndexItem)
  optionPie.value = {
    title: {
      text: "班级最新作业分数",
      subtext: tableIndexItem ? tableIndexItem.homeworkName : "暂无",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "成绩",
        type: "pie",
        radius: "50%",
        data: tableIndexItem
          ? [
              {value: tableIndexItem[90], name: "90分以上"},
              {value: tableIndexItem[80], name: "80-90分"},
              {value: tableIndexItem[70], name: "70-80分"},
              {value: tableIndexItem[60], name: "60-70分"},
              {value: tableIndexItem[0], name: "不及格"},
              {value: tableIndexItem.unfinishedStudent, name: "未完成"}
            ]
          : null,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  }
}
onMounted(async () => {
  const resTable = await Home.getClassListByTeacherId({teacherId: 1})
  options.value = resTable.data.classData[0].Grades.map((item: ClassType) => ({
    label: item.class_name,
    value: item.class_id
  }))
  classNameTop.value = options.value[0].value
  classNameMain.value = options.value[0].value
  const resTop = await Home.getHomeworkByTeacherId({
    teacherId: 1,
    classId: classNameTop.value
  })
  const resMain = await Home.getHomeworkByTeacherId({
    teacherId: 1,
    classId: classNameMain.value
  })
  topUpData(resTop.data)
  const max = resMain.data.studentArr ? resMain.data.studentArr.length : 0
  const num = max > 4 ? resMain.data.studentArr[max - 5] : resMain.data.studentArr[0]
  mainUpData(resMain.data, num.id)
})
</script>

<style lang="scss" scoped>
.teacherHome {
  height: 97%;
  padding: 10px 15px;
  &-top {
    &-title {
      text-align: left;
      margin-left: 50px;
      line-height: 40px;
      font-size: 18px;
    }
    &-main {
      padding: 0 20px;
      display: flex;
      &-table {
        & > .title {
          margin: 17px 0;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  &-main {
    margin-top: 50px;
    padding: 0 20px;
    display: flex;
    &-table {
      &-title {
        display: flex;
        font-size: 18px;
        padding: 20px 15px;
        justify-content: space-between;
      }
    }
  }
}
</style>
